@charset "utf-8";
@import "reset";
@import "utils";
//@import "common";
//body {
//  overflow: hidden;
//}
html,
body {
    width: 100%;
    height: 100%;
}

.Fricrion2-web {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to top, #a69c8d, #dbd7cf, #d2cec3);
    background: -webkit-linear-gradient(to top, #a69c8d, #dbd7cf, #d2cec3);
    .logo {
        width: 100%;
        height: r(100);
        background: #5c4233;
        line-height: r(100);
        position: absolute;
        top: 0;
        left: 0;
        padding-left: r(30);
        .Imgg {
            width: r(205);
            height: r(66);
            display: block;
            position: absolute;
            top: 50%;
            overflow: hidden;
            transform: translateY(-50%);
            img {
                position: absolute;
                width: 100%;
                top: -9999px;
                bottom: -9999px;
                left: -9999px;
                right: -9999px;
                margin: auto;
            }
        }
    }
    .section {
        width: 100%;
        height: r(907);
        overflow: auto;
        //      padding-top: r(30);
        position: absolute;
        top: r(100);
        //      .all {
        //          overflow: auto;
        .text {
            width: 85%;
            height: r(630);
            margin: 0 auto;
            padding-top: r(40);
            img {
                width: 100%;
            }
            //          @include aImg;
        }
        //  进度条
        .Progress {
            width: 85%;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            .xiaokuang {
                width: r(60);
                height: r(40);
                background: white;
                position: absolute;
                top: r(1);
                left: 1%;
                border-radius: r(10);
                font-size: r(12);
                text-align: center;
                z-index: 3;
                line-height: r(30);
                p {
                    line-height: r(40);
                    font-size: r(30);
                }
                .jiaotou {
                    width: r(10);
                    height: r(20);
                    background: white;
                    position: absolute;
                    left: r(22);
                    bottom: r(-5);
                    z-index: -2;
                    transform: rotate(137deg);
                }
            }
            .Progress1 {
                width: 85%;
                height: r(10);
                margin: 0 auto;
                background: #716346;
                border-radius: r(20);
                margin-top: r(50);
                padding-top: r(3.5);
                padding-left: 2.5%;
                position: relative;
                .div1 {
                    width: 0;
                    height: r(4);
                    background: white;
                    border-radius: r(20);
                    margin-left: 1%;
                }
                .div2 {
                    width: r(8);
                    height: r(8);
                    border-radius: 50%;
                    background: white;
                    position: absolute;
                    left: 1%;
                    top: r(1.5);
                }
            }
        }
        //      灰色信息框
        .huise {
            width: 85%;
            height: r(70);
            margin: 0 auto;
            font-size: r(24);
            color: white;
            background: #9d8888;
            border-radius: r(100);
            text-align: center;
            line-height: r(35);
            margin-top: r(20);
            padding-top: r(10);
            padding-bottom: r(10);
            span {
                color: yellow;
            }
        }
        //      为他充电
        .anniu {
            width: 85%;
            color: white;
            font-size: r(30);
            margin: 0 auto;
            margin-top: r(30);
            div {
                border: 1px solid white;
                width: 35%;
                height: r(60);
                text-align: center;
                line-height: r(60);
                border-radius: r(10);
                letter-spacing: r(3);
            }
            div:first-child {
                float: left;
            }
            div:last-child {
                float: right;
            }
        }
        //      活动规则
        .play-conten {
            width: 80%;
            height: r(360);
            border-radius: r(15);
            margin: auto;
            font-size: r(20);
            color: white;
            border: 1px solid white;
            padding: r(40) r(15) r(20);
            margin-top: r(160);
            position: relative;
            text-align: justify;
            .youziguize2 {
                width: r(187);
                height: r(40);
                margin: 0 auto;
                border: 1px solid white;
                border-radius: r(50);
                font-size: r(28);
                text-align: center;
                line-height: r(40);
                letter-spacing: r(5);
                position: absolute;
                top: r(-25);
                left: 50%;
                z-index: 2;
                background: #dbd7cf;
                transform: translateX(-50%);
            }
            p {
                line-height: r(40);
            }
        }
        //          朋友圈点赞
        .pengyou {
            width: 90%;
            margin: 0 auto;
            margin-top: r(40);
            padding-top: r(20);
            border-top: 1px solid gray;
            ul {
                li {
                    width: 75%;
                    height: r(50);
                    margin: 0 auto;
                    margin-bottom: r(20);
                    div:first-child {
                        float: left;
                        width: r(50);
                        height: r(50);
                        @include aImg;
                        //              vertical-align: middle;
                    }
                    div:last-child {
                        float: right;
                        font-size: r(14);
                        color: white;
                        text-align: left;
                        line-height: r(50);
                        //              vertical-align: middle;
                    }
                }
            }
        }
        //      }
    }
    //  点击为他充电后进入的页面
    .dianji {
        width: 100;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
        color: white;
        font-size: r(20);
        display: none;
        background: rgba(0, 0, 0, .8);
        >div {
            width: 40%;
            height: r(120);
            margin: 0 auto;
            border: 1px solid white;
            text-align: center;
            padding: r(30) r(10);
            border-radius: r(15);
            margin-top: r(340);
            span {
                color: yellow;
            }
            .que {
                width: 30%;
                height: r(40);
                margin: 0 auto;
                background: white;
                color: black;
                border-radius: r(15);
                text-align: center;
                line-height: r(40);
                margin-top: r(20);
            }
        }
    }
}